
    <ul class="pagination" id="pageSplit">
        <li :class="nowPageNo == 1 ? 'disabled' : '' ">
            <a href="#" v-on:click="pageClick(nowPageNo-1)">&laquo;</a>
        </li>
        <li v-for="i in pageLength" :class="nowPageNo == i ? 'active' : '' ">
            <a href="#"  v-on:click="pageClick(i)">{{i}}</a>
        </li>
        <li :class="nowPageNo == pageLength ? 'disabled' : '' ">
            <a href="#"  v-on:click="pageClick(nowPageNo+1)">&raquo;</a>
        </li>
    </ul>

<script>
    //采用vue管理分页查询
    var pageSplit=new Vue({
        el: '#pageSplit',
        data: {
            pageLengthUrl:Vue.prototype.pageLengthUrl, //取公共变量的url
            nowPageNo:1, //当前页号
            pageLength:1, //页面长度
            isSend:false
        },
        methods: {
            /**
             * 当控件触发按钮时
             */
            pageClick: function (i) {
                this.setNowPageNo(i);
                //触发引用的控件的方法
                if(this.isSend){
                    this.isSend =false; //清除状态
                    this.pageSelect(this.nowPageNo);
                }

            },
            /**
             * 根据点击的序号更新页码
             * @param i
             */
            setNowPageNo:function(i){
                if(i<1){
                    i=1;
                }else if(i>this.pageLength){
                    i = this.pageLength;

                }else if(i != this.nowPageNo){
                    this.isSend = true;
                }
                this.nowPageNo  = i ; // 设置当前页号
            },
            getPageLength:function(){
                this.$http.post(this.pageLengthUrl).then(function(data){
                    console.log(this.pageLengthUrl+': '+data.data.success);
                    if(data.data.success){
                        //将自己的
                        this.pageLength = data.data.data[0];
                    }else{
                        alert("获取页面长度失败："+data.data.errorMessage);
                    }
                }).catch(function(){
                    alert('服务器异常！');
                });
            }
        },
        created: function () {
            this.getPageLength();//加载页面长度
            console.log('--->pageSplit load success');
        },
    });
</script>